<template>
  <div class="sdy-order">
    <SdyHeader title="啥都有~订单" back></SdyHeader>

    <van-form @submit="SubmitHandler">
      <van-cell-group inset>
        <van-field 
        v-model="username"
         name="姓名" 
         label="姓名"
          placeholder="姓名"
          :rules="[{ required: true, message: '请填写姓名' }]" />
        <van-field 
        v-model="phone" 
        name="手机号" 
        label="手机号" 
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]" />
      </van-cell-group>
      <van-field
       v-model="area"
        is-link
        readonly 
        name="area" 
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true" />
      <van-popup
        v-model:show="showArea" position="bottom">
        <van-area 
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="showArea = false" />
      </van-popup>
      <van-cell-group inset>
        <van-field
         v-model="address"
          name="详细地址"
          label="详细地址" 
          placeholder="详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]" />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>


    <!-- 展示订单信息 -->
    <SdyOrderInfo  v-if="showInfo" @finish="orderFinishHandler" :info="info"></SdyOrderInfo>
    <SdyOrderList v-if="showList"/>
  </div>
</template>

<script setup lang="ts">

import { ref } from 'vue';
import { areaList } from '@vant/area-data';
import {  updateOrderAddress} from '@/api/order'
import SdyOrderInfo from  './components/SdyInfo.vue'
import SdyOrderList from  './components/SdyList.vue'
//准备表单数据
const username = ref<string>('')
const phone = ref<string>('')
const area = ref<string>('')
const address= ref<string>('')
const showArea = ref<boolean>(false)
const showInfo = ref<boolean>(false)
const showList = ref<boolean>(false)

// 准备接受信息
 const info = ref()

const SubmitHandler=async()=>{
  // 准备一个信息
  info.value={
    userid: window.localStorage.getItem('userid') as string ,
    name: username.value,
    tel: phone.value,
    province: area.value.split('/')[0],
    city:area.value.split('/')[1] ,
    county:area.value.split('/')[2],
    addressDetail: address.value,
    time: window.localStorage.getItem('time') as string,
  }
  const res= await updateOrderAddress(info.value)
  console.log(res);
  
  // 当订单信息展示出来
  showInfo.value=true
}

const onConfirm=(info:{name:string,value: string }[])=>{
  console.log(info);
  const str=info.reduce((prev,item)=>{
    return prev+'/'+item.name
  },'').slice(1)
  // console.log(str);
  area.value=str
  //关闭 对话框
  showArea.value=false
  
}

// 确认订单
 const orderFinishHandler = () => {
  showInfo.value = false
  showList.value = true
 }
// 采集订单所需的信息

// 采集完毕以后, 填充到指定位置

// 确认订单信息

// 查看所有订单

</script>

<style scoped lang="scss">

</style>